<template>
	<view class="account">
		<view class="account-text">请输入用水信息添加交费户号</view>
		<view class="account-add">
			<view class="account-add-item">
				<view class="account-add-item-text">缴费单位</view>
				<view class="account-add-item-img" @click="siteAdd">
					<text>选择缴费单位</text>
					<image src="../../../../static/image/箭头.png" mode="scaleToFill" />
				</view>
			</view>
			<view class="account-add-item">
				<view class="account-add-item-text">用水户号</view>
				<view class="account-add-item-img">
					<!-- <text></text> -->
					<input v-model="addText" placeholder="请输入用水户号" style="height: 100%; width: 240rpx;"/>
					<image
						src="https://cdn7.axureshop.com/demo/1996612/images/%E6%B7%BB%E5%8A%A0%E7%94%B5%E8%B4%B9%E6%88%B7%E5%8F%B7/u1210.svg"
						mode="scaleToFill" />
				</view>
			</view>
		</view>
		<view class="account-add-but">
			添加
		</view>
	</view>
</template>

<script setup>
import {ref} from "vue"
let addText = ref("")
// 添加缴费单位
let siteAdd = () => {
	uni.navigateTo({
		url: '/pages/waterElectric/components/AccountAdd/siteAdd'
	})
}
let addObj = ref({})

</script>

<style lang="scss" scoped>
.account {
	height: calc(100vh - 91rpx);
	background-color: #f5f5f5;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.account-text {
	font-size: 26rpx;
	height: 60rpx;
	line-height: 60rpx;
	color: #666666;
}

.account-add {
	background-color: #fff;

	.account-add-item {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		border: 1rpx solid #f5f5f5;
		font-size: 28rpx;
		justify-content: space-between;
		padding: 0 30rpx;

		.account-add-item-text {}

		.account-add-item-img {
			display: flex;
			align-items: center;

			text {
				margin-right: 40rpx;
				color: #cecece;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}
	}
}

.account-add-but {
	background-color: #02a7f0;
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	margin: 0 auto;
	margin-top: 60rpx;
	width: 90%;
	border-radius: 30rpx;
}
</style>